<template>
    <div class="child">
        <h2> 子组件 曹丕</h2>
        <h3> 收到父亲-曹操的消息：{{ fromCaocaoMsg }}</h3>
        <el-space>
            <el-input v-model="piMessage" style="width: 240px" placeholder="请输入内容" />
            <el-button @click="sendToFather">给父亲回话</el-button>
        </el-space>
        <CaoRui />
    </div>
</template>

<script lang="ts" setup>
import { inject, ref, type Ref } from 'vue'
import CaoRui from './CaoRui.vue'

const piMessage = ref('');

const fromCaocaoMsg = inject<Ref<string>>('family-message')
const updateGrandpaMessage = inject<(msg: string) => void>('update-grandpa-message');

const sendToFather = () => {
    if (updateGrandpaMessage) {
        updateGrandpaMessage(piMessage.value);
    }
}
</script>

<style scoped>
.child {
    display: grid;
    justify-content: center;
    align-items: center;
    background-color: rgb(192, 222, 223);
    height: 400px;
    padding: 20px;
}
</style>